<template>
    <div class="UserIPBox">
        <span class="pageName">用户管理 > 用户IP</span>

        <!-- 搜索框 -->
        <div class="searchBox">
            <!-- 号码 -->
            <div class="searchInp">
                <!-- 名称-->
                <el-select v-model="searchName" slot="prepend" placeholder="手机号" class="searchName">
                    <el-option v-for="(item, index) in optionArr" :key="index" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
                <!-- 内容 -->
                <el-input v-model="searchNum" placeholder="请输入内容" class="inp"></el-input>
            </div>

            <div class="searchInp">
                <label for="theName" class="noGapLabel">
                    昵称：
                </label>
                <el-input v-model="toName" placeholder="请输入昵称" name="theName" class="inp"></el-input>
                <label for="IP">
                    IP：
                </label>
                <el-input v-model="IP" placeholder="请输入IP" name="IP" class="inp"></el-input>
                <!-- 时间 -->
                <label for="date">
                    登录时间：
                </label>
                <el-date-picker v-model="loginDate" type="daterange" align="right" unlink-panels range-separator="~"
                    start-placeholder="2015-10-02" :end-placeholder="endDate" :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd" class="dateInp">
                </el-date-picker>
                <label for="select">
                    状态：
                </label>
                <!-- select选择框 -->
                <el-select v-model="selectValue" slot="prepend" placeholder="全部" name="select" class="option">
                    <!-- 循环渲染option的每一项 -->
                    <el-option v-for="optionArr in selectOptionArr" :key="optionArr.id" :label="optionArr.content"
                        :value="optionArr.content"></el-option>
                </el-select>
            </div>

            <el-button type="primary" @click="searchUser">搜索</el-button>
        </div>
        <!-- 表格 -->
        <div class="tableBox">
            <el-table :data="userIPList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
                style="width: 98%;font-size: 14px;margin: auto;margin-left: 30px;"
                :header-cell-style="{ background: '#015478', color: '#fff' }">
                <el-table-column prop="id" label="ID" align="center">
                </el-table-column>
                <el-table-column prop="img" label="头像" align="center">
                    <template slot-scope="scope">
                        <img slot="reference" :src="scope.row.img" style="width: 30px;height: 30px">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="昵称" align="center">
                </el-table-column>
                <el-table-column prop="tel" label="手机号" align="center">
                </el-table-column>
                <el-table-column prop="chatNum" label="来聊号" align="center">
                </el-table-column>
                <el-table-column prop="loginDate" label="最近登录" align="center">
                </el-table-column>
                <el-table-column prop="IP" label="IP" align="center">
                </el-table-column>
                <el-table-column prop="mode" label="状态" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button @click="freeze(scope.row)" type="text"
                            style="color: #015478;font-size: 14px">{{ scope.row.operate }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <pagination :tableData="userIPList" @sizeChange="sizeChange" @currentChange="currentChange"></pagination>
        </div>
    </div>
</template>

<script>

import pagination from '@/components/pagination/pagination.vue';

export default {
    name: 'UserIP',
    components: {
        pagination
    },
    data() {
        return {
            userIPList: [],
            currentPage: 1, // 当前页码
            total: '', // 总条数
            pageSize: 8, // 每页的数据条数

            // 输入框内容
            searchName: '',
            searchNum: '',
            toName: '',
            IP: '',
            loginDate: '',
            selectValue: '',
            optionArr: [
                { label: 'ID', value: 'id' },
                { label: '手机号', value: 'tel' },
                { label: '来聊号', value: 'chatNum' }
            ],
            selectOptionArr: [
                { id: 1, content: '全部' },
                { id: 2, content: '正常' },
                { id: 3, content: '已冻结' }
            ],
            // 设置默认显示时间
            endDate: '',
            // 时间输入框快捷选项
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }],
                // 设置可选时间范围
                disabledDate: (time) => {
                    return time.getTime() <= new Date('2015-10-01').getTime() || time.getTime() > Date.now() - 8.64e6
                }
            }
        }
    },
    methods: {
        sizeChange(current, count) {
            this.currentPage = current;
            this.pageSize = count;
        },
        currentChange(current) {
            this.currentPage = current
        },
        // 获取当前日期
        handleTimeNew() {
            let now = new Date();
            let year = now.getFullYear();
            let month = (now.getMonth() + 1).toString().padStart(2, 0);
            let day = now.getDate().toString().padStart(2, 0);
            return year + '-' + month + '-' + day
        },
        // 搜索
        searchUser() {
            this.$axios({
                method: 'get',
                url: this.$api.user.userIPSearch,
                params: {
                    searchName: this.searchName,
                    searchNum: this.searchNum,
                    toName: this.toName,
                    IP: this.IP,
                    loginDate: this.loginDate,
                    selectValue: this.selectValue
                }
            })
            .then(res=>{
                this.userIPList = res.data,
                this.searchName= this.optionArr[1].value,
                this.searchNum= '',
                this.toName= '',
                this.IP=''
            })
            .catch(err=>{
                console.log(err);
            })

        },
        // 冻结当前选中内容
        freeze(row) {
            this.$axios({
                method: 'get',
                url: this.$api.user.alterMode,
                params: {
                    userID: row.id,
                    userMode: row.mode,
                    userOperate: row.operate
                }
            })
                .then(res => {
                    if (res.data == 'success') {
                        this.$axios.get(this.$api.user.userList)
                            .then(res => {
                                this.userIPList = res.data;
                            })
                            .catch(err => {
                                console.log(err);
                            })
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
    },
    created() {
        this.searchName = this.optionArr[1].value,
        this.selectValue = this.selectOptionArr[0].content,
        this.endDate = this.handleTimeNew()
        this.$axios.get(this.$api.user.userList)
            .then(res => {
                this.userIPList = res.data;
            })
            .catch(err => {
                console.log(err);
            })
    },
}
</script>

<style scoped>
.UserIPBox {
    display: flex;
    flex-direction: column;
}

.inpBox {
    display: flex;
    padding: 10px 10px;
}

.searchInp {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.dateInp {
    width: 225px;
}

button {
    height: 40px;
    margin-left: 10px;
}

.inp {
    width: 150px;
}

.option {
    width: 100px;
}

.searchName {
    width: 90px;
}
</style>